<template>
  <div class="goods-edit">
    <div class="goods-content">
      <el-form ref="goodFormRef" :model="goodsData.form" :label-width="110" :status-icon="true" :show-message="false">
        <div class="goods_info">
          <p class="title">商品信息</p>
          <el-form-item label="器械类别" prop="apparatusCategoryId" required>
            <el-cascader v-model="goodsData.form.apparatusCategoryId" :options="options" placeholder="请选择器械类别" :props="{ emitPath: false }" />
          </el-form-item>
          <el-form-item label="商品主图" required>
            <div class="uploadImg">
              <el-upload class="goods_img" list-type="picture-card" v-model:file-list="goodsImgList" multiple
                         :action="actionUrl"  :limit="5" :on-preview="onPictureCardPreview"
                         :before-upload="beforeUpload" :on-exceed="handleExceed"
                         :on-success="onUploadSuccess">
                <div class="icon-box">
                  <el-icon><Plus /></el-icon>
                  <div class="text">点击上传</div>
                </div>
              </el-upload>
              <div class="tips">
                <p class="img-tip">只能上传jpg/png/jpeg文件，且不超过10MB</p>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="商品通用名" prop="goodsName" required>
            <el-input class="third_input" v-model="goodsData.form.goodsName" placeholder="请输入商品通用名"></el-input>
          </el-form-item>
          <el-form-item label="商品商用名">
            <el-input class="third_input" v-model="goodsData.form.goodsSubtitle" placeholder="请输入商品商用名"></el-input>
          </el-form-item>
          <!--          <el-form-item label="商品品牌" required>-->
          <!--            <el-input class="boss_input" v-model="goodsData.form.brand" placeholder="请输入商品品牌" clearable />-->
          <!--          </el-form-item>-->
          <el-form-item label="商品类目" prop="goodsType" required>
            <el-select v-model="goodsData.form.goodsType" class="goods_select" placeholder="请选择商品类目">
              <el-option v-for="item in GoodsTypeList" :label="item.value" :value="item.name" />
            </el-select>
          </el-form-item>
          <el-form-item label="商品分类" prop="goodsCate" required>
            <el-cascader class="cascader_input" v-model="goodsData.form.goodsCate" :options="cateOptions" clearable @change="onCateChange"></el-cascader>
          </el-form-item>

          <div class="tags" style="display: flex" v-if="goodsData.form.goodsExpandparamValueList.length > 0">
            <el-form-item label="商品属性" required />

            <div class="expand">
              <el-form-item v-for="tags in goodsData.form.goodsExpandparamValueList" :key="tags.expandparamId">
                <div class="expand-box" style="display: flex">
                  <span class="tag-label">{{ tags.expandparamName }}</span>
                  <div class="tags">
                    <el-radio :class="tags.expandparamValueId == tag.expandparamValueId ? 'active' : ''" v-for="tag in tags.categoryExpandparamValueList" :key="tag.expandparamValueId" :label="tag.expandparamValueId" v-model="tags.expandparamValueId" border @click.prevent="onExpandClick(tags, tag)">{{ tag.expandparamValueName }}</el-radio>
                  </div>
                </div>
              </el-form-item>
            </div>
          </div>

          <div class="items">
            <div class="_left">
              <el-form-item label="成本价" prop="goodsCostPrice" required>
                <el-input style="width: 310px" class="boss_input" v-model="goodsData.form.goodsCostPrice" oninput="value=value.replace(/[^\d.]/g,'')" placeholder="请输入成本价" clearable></el-input>
              </el-form-item>
              <el-form-item label="库存" prop="stock" required>
                <el-input style="width: 310px" class="boss_input" v-model="goodsData.form.stock" oninput="value=value.replace(/[^\d.]/g,'')" placeholder="请输入库存" clearable></el-input>
              </el-form-item>
            </div>

            <div class="_right">
              <el-form-item label="销售价" prop="goodsSalesPrice" required>
                <el-input style="width: 310px" class="boss_input" v-model="goodsData.form.goodsSalesPrice" oninput="value=value.replace(/[^\d.]/g,'')" placeholder="请输入销售价" clearable></el-input>
              </el-form-item>
              <el-form-item label="起定量" prop="minimumQuantity" required>
                <el-input style="width: 310px" class="boss_input" v-model="goodsData.form.minimumQuantity" oninput="value=value.replace(/[^\d.]/g,'')" placeholder="请输入起定量" clearable></el-input>
              </el-form-item>
            </div>
          </div>
          <!-- <el-form-item label="品牌" prop="brand" required>
            <el-input class="third_input" v-model="goodsData.form.brand" placeholder="请输入品牌" clearable></el-input>
          </el-form-item> -->
        </div>

        <div class="goods_introduce">
          <p class="title">商品介绍</p>
          <div class="info">
            <div class="items">
              <div class="_left">
                <el-form-item label="销售单位" prop="goodsIntro.packingUnit" required>
                  <el-input class="third_input" v-model="goodsData.form.goodsIntro.packingUnit"></el-input>
                </el-form-item>
                <el-form-item label="生产企业" prop="goodsIntro.productionEnterprise" required>
                  <el-input class="third_input" v-model="goodsData.form.goodsIntro.productionEnterprise"></el-input>
                </el-form-item>
                <el-form-item label="注册证号" prop="goodsIntro.registrationNumber" required>
                  <el-input class="third_input" v-model="goodsData.form.goodsIntro.registrationNumber"></el-input>
                </el-form-item>
              </div>

              <div class="_right">
                <el-form-item label="注册人" prop="goodsIntro.registrant" required>
                  <el-input class="third_input" v-model="goodsData.form.goodsIntro.registrant"></el-input>
                </el-form-item>

                <el-form-item label="有效期 (月)" prop="goodsIntro.validityPeriod" required>
                  <el-input class="third_input" v-model="goodsData.form.goodsIntro.validityPeriod" oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"></el-input>
                </el-form-item>
                <el-form-item label="适用范围" prop="goodsIntro.applicationScope" required>
                  <el-input class="third_input" v-model="goodsData.form.goodsIntro.applicationScope"></el-input>
                </el-form-item>
              </div>
            </div>
            <el-form-item class="item" label="使用方法">
              <el-input class="third_input" v-model="goodsData.form.goodsIntro.methodApplication"></el-input>
            </el-form-item>

            <el-form-item class="item" label="禁忌症">
              <el-input class="third_input" v-model="goodsData.form.goodsIntro.contraindication"></el-input>
            </el-form-item>
            <!-- <el-form-item class="item" label="产品组成" prop="goodsIntro.productFormation" required>
              <el-input class="third_input" v-model="goodsData.form.goodsIntro.productFormation"></el-input>
            </el-form-item> -->

            <el-form-item class="item" label="产品组成" required>
              <div class="product">
                <div class="uploadImg">
                  <el-upload :class="['goods_img', { disabledImg: productList?.length > 0 ? true : false }]" v-model:file-list="productList" multiple :action="actionUrl" list-type="picture-card" :on-preview="onPictureCardPreview" :before-upload="(file) => beforeUpload(file, 'product')" :on-success="onUploadSuccess">
                    <div class="icon-box">
                      <el-icon><Plus /></el-icon>
                      <div class="text">点击上传</div>
                    </div>
                  </el-upload>
                  <div class="tips">
                    <p class="img-tip">只能上传jpg/png/jpeg文件，且不超过10MB</p>
                  </div>
                </div>
                <el-input class="boss_input" v-model="goodsData.form.productFormation" clearable @change="onProductChange"></el-input>
              </div>
            </el-form-item>
          </div>
        </div>

        <div class="goods_license">
          <p class="title">证件信息</p>
          <div class="type">
            <div class="type-box" v-for="(cert, index) in goodsData.form.certs" :key="index">
              <div class="checkBox-small">
                <el-checkbox v-model="cert.checked" :label="cert.title" size="large" />
              </div>

              <div v-if="cert.checked">
                <div class="checkBox-large">
                  <div class="qulification">
                    <el-form-item label="上传证件照片" :prop="`certs[${index}].qualificationListImg`" class="item">
                      <div class="uploadImg">
                        <el-upload class="goods_img" multiple v-model:file-list="cert.qualificationListImg"
                                   list-type="picture-card" :limit="2" :on-preview="onPictureCardPreview"
                                   :before-upload="beforeUpload" :on-exceed="qualificationExceed"
                                   :on-success="onUploadSuccess" :action="actionUrl">
                          <div class="icon-box">
                            <el-icon><Plus /></el-icon>
                            <div class="text">点击上传</div>
                          </div>
                        </el-upload>
                        <div class="tips">
                          <p class="img-tip">只能上传jpg/png/jpeg文件，且不超过10MB</p>
                        </div>
                      </div>
                    </el-form-item>
                    <el-form-item v-if="cert.qualificationType !== 'FIRST_PRODUCT_RECORD_CERTIFICATE' && cert.qualificationType !== 'FIRST_PRODUCTION_RECORD_CERTIFICATE'" class="time" label="证件生效期" :prop="`certs[${index}].effectiveDate`" required>
                      <el-date-picker v-model="cert.effectiveDate" type="date" placeholder="请选择开始时间" format="YYYY/MM/DD" value-format="YYYY/MM/DD" clearable />
                      <el-icon class="time-icon"><Minus /></el-icon><el-date-picker v-model="cert.expiredDate" class="time" type="date" placeholder="请选择到期时间" format="YYYY/MM/DD" value-format="YYYY/MM/DD" clearable />
                    </el-form-item>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="product_operation">
          <p class="title">产品使用说明书</p>
          <div class="uploadImg">
            <el-upload class="goods_img" v-model:file-list="instructionsList" multiple :action="actionUrl" list-type="picture-card" :on-preview="onPictureCardPreview" :on-success="onUploadSuccess" :before-upload="beforeUpload">
              <div class="icon-box">
                <el-icon><Plus /></el-icon>
                <div class="text">点击上传</div>
              </div>
            </el-upload>
            <div class="tips">
              <p class="img-tip">只能上传jpg/png/jpeg文件，且不超过10MB</p>
            </div>
          </div>
        </div>
        <div class="goods_detail">
          <p class="title">商品详情</p>
          <div class="uploadImg">
            <el-upload class="goods_img" v-model:file-list="detailList" multiple :action="actionUrl" list-type="picture-card" :on-preview="onPictureCardPreview" :on-success="onUploadSuccess" :before-upload="beforeUpload">
              <div class="icon-box">
                <el-icon><Plus /></el-icon>
                <div class="text">点击上传</div>
              </div>
            </el-upload>
            <div class="tips">
              <p class="img-tip">只能上传jpg/png/jpeg文件，且不超过10MB</p>
            </div>
          </div>
          <el-dialog v-model="dialogVisible">
            <img w-full :src="dialogImageUrl" style="width: 100%; height: 100%" />
          </el-dialog>
        </div>
      </el-form>
    </div>
    <div class="audit_button">
      <Button label="取消" @click="onCancelClick" />
      <Button label="保存并提交审核" type="primary" @click="onSaveClick" />
    </div>
  </div>

  <el-image-viewer ref="previewViewer" v-if="showImageViewer" @close="closeImgView" :url-list="srcList" />
</template>
<script setup>
import { onMounted, reactive, ref, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, Minus } from '@element-plus/icons-vue'
import api from '@/api'
import consts from '@/consts'
import { apiBasePath } from '@/api/config'
import Button from '@/components/button/button.vue'
import Link from '@/components/button/link.vue'

const router = useRouter()
const route = useRoute()

const goodsId = route.params.id

const goodsData = reactive({
  form: {
    goodsId: '',
    goodsImg: '',
    apparatusCategoryId: '',
    goodsType: '',
    goodsName: '',
    goodsSubtitle: '',
    unit: '',
    brand: '',
    goodsCostPrice: '',
    goodsSalesPrice: '',
    stock: '',
    minimumQuantity: '1',
    goodsIntro: {},
    goodsExpandparamValueList: [],
    goodsCate: [],
    goodsCatIdFirst: '',
    goodsCatIdSecond: '',
    goodsCatIdThird: '',
    instructions: '',
    productFormation: '',
    goodsDetail: '',
    certs: consts.goodsQualificationType.map((e) => {
      return {
        ...e,
        checked: false,
        qualificationImg: '',
        effectiveDate: '',
        expiredDate: '',
        supplierQualificationId: '',
        qualificationListImg:[]
      }
    })
  }
})

const arr = {
  first: 'I类医疗器械',
  second: 'II类医疗器械',
  third: 'III类医疗器械'
}

let opts = {}

const options = ref([])
const cateOptions = ref([])

let cates = []

const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const showImageViewer = ref(false)
const srcList = ref([])

const goodFormRef = ref(null)
const detailList = ref([])
const goodsImgList = ref([])
const instructionsList = ref([])
const productList = ref([])
const GoodsTypeList = []
for (const item in consts.GoodsType) {
  GoodsTypeList.push({
    name: item,
    value: consts.GoodsType[item]
  })
}
const actionUrl = apiBasePath + '/medinstrument/third/uploadSingleFile'

const save = async () => {
  let goodsEditForm = Object.assign({}, goodsData.form)

  if (route.query.t === 'c') {
    delete goodsData.form.goodsId
  }

  let goodsImgs = goodsImgList.value
    .filter((e) => e.status === 'success')
    ?.map((e) => {
      if (e.old) {
        return e.url
      } else {
        return e.response.data
      }
    })

  goodsEditForm.goodsImg = goodsImgs.join(',')

  if (goodsEditForm.goodsCate) {
    goodsEditForm.goodsCatIdFirst = goodsEditForm.goodsCate[0]
    goodsEditForm.goodsCatIdSecond = goodsEditForm.goodsCate[1]
    goodsEditForm.goodsCatIdThird = goodsEditForm.goodsCate[goodsEditForm.goodsCate.length - 1]
  }
  delete goodsEditForm.goodsCate

  goodsEditForm.goodsExpandparamValueList = []
  try {
    goodsEditForm.goodsExpandparamValueList = goodsData.form.goodsExpandparamValueList
      ?.map((e) => {
        const expandparamValueId = e.expandparamValueId
        const expandparamValue = e.categoryExpandparamValueList.find((a) => a.expandparamValueId == expandparamValueId)
        if (!expandparamValue) {
          return null
          // throw new Error(`商品属性:${e.expandparamName} 未选内容`)
        }
        return { ...expandparamValue, expandparamName: e.expandparamName }
      })
      .filter((e) => e)

    if (goodsEditForm.goodsExpandparamValueList.length === 0) {
      return ElMessage.error('至少选择一个商品属性')
    }
  } catch (e) {
    alert(e)
    return
  }

  if (productList.value.length > 0) {
    let productImgs = productList.value
      .filter((e) => e.status === 'success')
      .map((e) => {
        if (e.old) {
          return e.url
        } else {
          return e.response.data
        }
      })

    goodsEditForm.goodsIntro.productFormation = productImgs.join(',')
  } else {
    goodsEditForm.goodsIntro.productFormation = goodsData.form.productFormation
  }

  delete goodsData.form.productFormation

  if (goodsData.form.certs.filter((e) => e.checked === false).length === goodsData.form.certs.length) {
    return ElMessage.error('证件信息至少上传一种证件')
  } else {
    let goodsQualificationList = goodsData.form.certs
      .filter((e) => e.checked === true)
      .map((e) => {
        let postImgList = e.qualificationListImg
          .map(img => {
            return img.response ? img.response.data : img.url
          })
          .join(',')
        return {
          qualificationImg: postImgList,
          expiredDate: e.expiredDate,
          effectiveDate: e.effectiveDate,
          goodsQualificationType: e.qualificationType,
          goodsQualificationId: e.goodsQualificationId
        }
      })
    goodsEditForm.goodsQualificationList = goodsQualificationList
    delete goodsEditForm.certs
  }

  let instructImgs = instructionsList.value
    .filter((e) => e.status === 'success')
    .map((e) => {
      if (e.old) {
        return e.url
      } else {
        return e.response.data
      }
    })

  goodsEditForm.instructions = JSON.stringify(instructImgs)

  if (detailList.value.length === 0) {
    return ElMessage.error('商品详情至少上传一张图片')
  } else {
    let imgs = detailList.value
      .filter((e) => e.status === 'success')
      .map((e) => {
        if (e.old) {
          return e.url
        } else {
          return e.response.data
        }
      })

    goodsEditForm.goodsDetail = JSON.stringify(imgs)
  }

  let url = '/medinstrument/third/goods/addGoods'
  if (goodsData.form.goodsId) {
    url = '/medinstrument/third/goods/updateGoods'
  }
  let { err } = await api.post(url, goodsEditForm)
  if (err) {
    ElMessage.error(err)
  } else {
    goodsData.form.goodsId ? ElMessage.success('商品编辑成功') : ElMessage.success('商品添加成功')
    router.push('/goods')
  }
}

const goodsDetailData = async () => {
  if (goodsId) {
    let { err, data } = await api.get(`/medinstrument/third/goods/goodsDetail?goodsId=${goodsId}`)
    if (err) {
      ElMessage.error(err)
    } else {
      let { goodsId, goodsImg, goodsName, goodsSubtitle, brand, goodsType, goodsIntro, stock, goodsCostPrice, goodsSalesPrice, minimumQuantity } = data
      goodsData.form.goodsId = goodsId
      goodsData.form.goodsName = goodsName
      goodsData.form.goodsSubtitle = goodsSubtitle
      goodsData.form.brand = brand
      goodsData.form.goodsType = goodsType
      goodsData.form.goodsIntro = goodsIntro
      goodsData.form.stock = stock
      goodsData.form.goodsCostPrice = goodsCostPrice
      goodsData.form.goodsSalesPrice = goodsSalesPrice
      goodsData.form.minimumQuantity = minimumQuantity

      if (goodsIntro) {
        goodsData.form.goodsIntro = goodsIntro
      }

      if (data.goodsCatIdThird) {
        goodsData.form.goodsCate = [data.goodsCatIdFirst, data.goodsCatIdSecond, data.goodsCatIdThird]

        await goodsExpandData(data.goodsCatIdThird)
      }

      goodsData.form.goodsExpandparamValueList.forEach((e) => {
        const expandparamValue = data.goodsExpandparamValueList.find((a) => a.expandparamId == e.expandparamId)
        if (expandparamValue) {
          e.expandparamValueId = expandparamValue.expandparamValueId
        }
      })

      const isImage = computed(() => {
        let reg = /(\.jpg|\.jpeg|\.png)$/i

        return reg.test(goodsData.form.goodsIntro.productFormation)
      })

      if (isImage.value) {
        productList.value = goodsData.form.goodsIntro.productFormation.split(',')?.map((e) => ({ url: e, old: true }))
      } else {
        goodsData.form.productFormation = goodsIntro.productFormation
      }

      goodsImgList.value = goodsImg.split(',')?.map((e) => ({ url: e, old: true }))
      instructionsList.value = JSON.parse(data.instructions)?.map((e) => ({ url: e, old: true }))
      detailList.value = JSON.parse(data.goodsDetail)?.map((e) => ({ url: e, old: true }))
      goodsData.form.apparatusCategoryId = data.apparatusCategoryId

      const goodsQualificationList = data.goodsQualificationList || []
      if (goodsQualificationList.length > 0) {
        goodsData.form.certs.forEach((cert) => {
          const qualification = goodsQualificationList.find((e) => cert.qualificationType === e.goodsQualificationType)
          if (qualification) {
            Object.assign(cert, { checked: true }, qualification)
          }
        })
      }
      goodsData.form.certs.forEach(item => {
        // 存在照片
        if (item.qualificationImg) {
          item.qualificationListImg = item.qualificationImg.includes(',') ? item.qualificationImg.split(',').map(e => ({
              url: e,
              old: true
            }
          )) : [item.qualificationImg].map((e) => ({
            url: e,
            old: true
          }))
        }
      })
    }
  }
}

const goodsExpandData = async (CatId) => {
  let { data, err } = await api.get(`/medinstrument/third/expandparam/getExpandparamByCatId?CatId=${CatId}`)
  if (err) {
    ElMessage.error(err)
  } else {
    goodsData.form.goodsExpandparamValueList = data.list || []
  }
}

const supplierData = async () => {
  let { data, err } = await api.get('/medinstrument/third/supplier/information')
  if (err) {
    ElMessage.error(err)
  } else {
    getApparatusCategoryIds(data.apparatusCategoryIds)
    onChangeGoodsType(data.goodsType)

    // goodsData.form.goodsType = data.goodsType
  }
}

const getApparatusCategoryIds = (apparatusCategoryIds) => {
  if (apparatusCategoryIds?.length > 0) {
    let tmpOpts = []
    Object.keys(opts)
      .sort()
      .forEach((e) => {
        let data = opts[e]
        let children = []
        data.forEach((a) => {
          let idx = apparatusCategoryIds.findIndex((b) => a.apparatusCategoryId === b)
          if (idx > -1) {
            children.push({
              label: a.apparatusCategoryName,
              value: a.apparatusCategoryId
            })
          }
        })
        children.length > 0 &&
          tmpOpts.push({
            label: arr[e],
            children
          })
      })

    options.value = tmpOpts
  }
}

const goodsApparatusCateData = async () => {
  let { data, err } = await api.get('/medinstrument/third/supplier/getApparatusCategory')
  if (err) {
    ElMessage.error(err)
  } else {
    opts = data
  }
}

const goodsCateData = async () => {
  let { data, err } = await api.get('/medinstrument/third/goodsCategory/getAllGoodsCategory')
  if (err) {
    ElMessage.error(err)
  } else {
    cateOptions.value = data.result?.map((c1) => {
      return {
        label: c1.catName,
        value: c1.catId,
        disabled: !c1.categoryChilden || c1.categoryChilden.length === 0,
        children: c1.categoryChilden?.map((c2) => {
          return {
            label: c2.catName,
            value: c2.catId,
            disabled: !c2.categoryChilden || c2.categoryChilden.length === 0,
            children: c2.categoryChilden?.map((c3) => ({ label: c3.catName, value: c3.catId }))
          }
        })
      }
    })
  }
}

const onChangeGoodsType = (val) => {
  // let cate = cates.find((e) => e.value === val) || {}
  // cateOptions.value = cate.children || []
}

const onCateChange = (catIds) => {
  let CatId = catIds[catIds.length - 1]
  goodsExpandData(CatId)
  goodsData.form.goodsExpandparamValueList = []
}

const onProductChange = (val) => {
  if (productList.value.length > 0) {
    ElMessage.error('产品组成已上传图片，不能填写文字描述')
    goodsData.form.productFormation = ''
    return
  }
}

const onSaveClick = () => {
  if (goodsData.form.certs.filter((e) => e.checked === false).length === goodsData.form.certs.length) {
    ElMessage.error('证件信息至少上传一种证件')
    return
  }
  const checkData = goodsData.form.certs.filter((e) => e.checked === true)
  if (checkData) {
    let isReject
    checkData.forEach(item => {
      if (item.qualificationListImg.length === 0){
        isReject = item.title
      }
    })
    if (isReject){
      ElMessage.error(`${isReject} 至少上传一种证件`)
      return
    }
  }
  goodFormRef.value.validate((valid) => {
    if (valid) {
      ElMessageBox.confirm('是否保存并提交审核？', '系统', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          save()
        })
        .catch(() => {})
    }
  })
}

const onCancelClick = () => {
  router.push('/goods')
}

const beforeUpload = (file, type) => {
  const isJPG = file.type === 'image/jpg' || file.type === 'image/png' || file.type === 'image/jpeg'
  const isLt1M = file.size / 1024 / 1024 < 10

  if (!isJPG) {
    ElMessage.error('只能上传jpg/png/jpeg文件!')
  }
  if (!isLt1M) {
    ElMessage.error('上传图片大小不能超过 10MB!')
  }

  if (type === 'product') {
    if (goodsData.form.productFormation) {
      ElMessage.error('产品组成已有文字描述，无法上传图片!')
      return false
    }
  }

  return isJPG && isLt1M
}

const handleExceed = (files, uploadFiles) => {
  ElMessage.error(`最多只能上传5张图片`)
}
const qualificationExceed = () => {
  ElMessage.error(`最多只能上传2张图片`)
}

const onUploadSuccess = (res, file) => {}

const onQualicaUploadSuccess = (cert, res) => {
  cert.qualificationImg = res.data
}

const onPictureCardPreview = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url
  dialogVisible.value = true
}

const onShowImgClick = (url) => {
  srcList.value = [url]
  showImageViewer.value = true
}

const closeImgView = () => {
  showImageViewer.value = false
}

const onExpandClick = (tags, tag) => {
  if (tags.expandparamValueId == tag.expandparamValueId) {
    tags.expandparamValueId = null
  } else {
    tags.expandparamValueId = tag.expandparamValueId
  }
}

onMounted(() => {
  goodsApparatusCateData()
  goodsCateData()
  goodsDetailData()
  supplierData()
})
</script>
<style scoped lang="scss">
.goods-edit {
  .goods-content {
    margin: 0 15px 0 10px;

    .uploadImg {
      //display: flex;
      //align-items: flex-end;
      font-size: 12px;

      .icon-box {
        display: flex;
        flex-direction: column;
        align-items: center;

        .text {
          line-height: 14px;
          text-align: center;
          padding: 0 30px;
          margin-top: 8px;
          color: var(--color-text);
        }
      }
      .tips {
        .img-tip {
          color: var(--span-color-text);
          margin-top: 12px;
        }
      }
    }

    .boss_input,
    :deep(.el-cascader) {
      width: 750px;
    }

    :deep(.el-cascader) {
      .el-input {
        height: 40px;
      }
    }

    .goods_img {
      .el-upload--picture-card {
        width: 146px;
        height: 146px;
      }
      .el-upload-list {
        flex-wrap: nowrap !important;
      }
    }

    .goods_info,
    .goods_introduce,
    .goods_detail,
    .goods_license,
    .product_operation {
      background-color: var(--background);
      margin: 10px 0;
      padding: 20px;

      .title {
        height: 16px;
        line-height: 16px;
        font-size: 16px;
        font-weight: 500;
        margin-bottom: 20px;
      }
    }

    .goods_info {
      .goods_select,
      .expand {
        width: 750px;
      }

      .expand {
        display: flex;
        flex-direction: column;

        .expand-box {
          display: flex;

          .tag-label {
            position: relative;
            width: 36px;
            color: var(--span-title-text);
            font-weight: 500;
            padding-right: 8px;
          }

          .tag-label::after {
            content: '';
            width: 0;
            height: 0;
            position: absolute;
            left: 44px;
            top: 12px;
            border-top: 5px solid transparent;
            border-bottom: 5px solid transparent;
            border-left: 5px solid #919398;
          }

          .tags {
            margin-left: 18px;
            flex: 1;
          }
        }
      }
    }

    .goods_introduce,
    .goods_info {
      .items {
        display: flex;

        ._left,
        ._right {
          display: flex;
          flex-direction: column;

          .boss_input {
            width: 309px;
          }
        }

        ._right {
          margin-left: 20px;
        }
      }
    }

    .goods_introduce {
      .info {
        .product {
          display: flex;
          flex-direction: column;

          .uploadImg {
            margin-bottom: 20px;
          }
        }
      }
    }
  }
}

.goods_license {
  .avatar-uploader {
    .el-upload {
      img {
        width: 80px;
        height: 80px;
      }
    }
  }

  .type {
    .type-box {
      border: 1px solid var(--input-border-color);
      margin-bottom: 20px;
      border-radius: 4px;
    }

    .checkBox-small {
      display: flex;
      align-items: center;
      background-color: #fafafa;
      height: 48px;
      line-height: 16px;
      padding-left: 20px;
      border-radius: 4px;
    }

    .checkBox-large {
      .qulification {
        color: var(--color-text);
        padding-left: 10px;

        .el-form-item {
          margin: 0;
        }

        .item {
          margin: 20px 0;

          .upload-img {
            display: flex;
            align-items: flex-end;

            .tips {
              display: flex;
              align-items: center;

              .btn {
                margin-left: 10px;
              }

              .img-tip {
                font-size: 12px;
                color: var(--span-color-text);
                height: 16px;
                line-height: 16px;
                margin-left: 12px;
              }
            }

            .noImg {
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              width: 80px;
              height: 80px;

              .el-icon svg {
                width: 25px;
                height: 25px;
                margin-bottom: 10px;
              }

              .tip {
                font-size: 12px;
                line-height: 12px;
                padding: 0 5px;
                text-align: center;
              }
            }
          }
        }

        .time {
          margin-bottom: 30px;

          .time-icon {
            font-size: 8px;
            margin: 0 11px;
            color: var(--span-color-text);
          }
        }
      }
    }
  }
}

.el-icon.avatar-uploader-icon {
  height: auto;
}

.disabledImg {
  :deep(.el-upload--picture-card) {
    display: none;
  }
}
</style>
<style>
.goods_info .expand .el-form-item .el-form-item__content {
  margin-left: 0 !important;
}

.goods_info .el-radio__input {
  display: none;
}

.goods_info .el-radio__label {
  padding-left: 0;
  line-height: 18px;
}

.goods_info .el-radio.is-bordered {
  padding: 10px;
  height: 40px;
  margin: 0 10px 10px 0;
}

.tags .el-radio {
  position: relative;
}

.tags .el-radio.active .el-radio__label::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border: 10px solid #0486fe;
  border-left-color: transparent;
  border-top-color: transparent;
}

.tags .el-radio.active .el-radio__label::before {
  content: '';
  position: absolute;
  bottom: 3px;
  right: 3px;
  width: 2px;
  height: 4px;
  border: 1px solid #fff;
  border-top-color: transparent;
  border-left-color: transparent;
  transform: rotate(45deg);
  z-index: 1;
}
</style>
